<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="layui-col-xs8">
            <div class="layui-form-item">
                <input name="search_key" placeholder="请输入名称搜索" value="{:input('search_key')}" class="layui-input"
                       type="text">
            </div>
        </div>
        <div class="layui-col-xs4">
            <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="formDemo">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>
    <div class="layui-col-xs6 text-right">
        <input type="checkbox" lay-filter="ids" title="全选" id="ids">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn  layui-btn-sm layui-btn-normal" id="set-group">
                <i class="fa fa-bookmark-o"></i>设置分组
            </button>
            <a class="layui-btn  layui-btn-sm layui-btn-danger" onclick="clickDelBatch()">
                <i class="fa fa-trash-o"></i>批量删除
            </a>
            <button type="button" class="layui-btn  layui-btn-sm  bg-success" id="picker-add">
                <i class="fa fa-upload"></i>上传视频
            </button>
        </div>
    </div>
</div>

<div class="layui-row">
    {volist name="data_list" id="item"}
    <div class="layui-col-xs3">
        <div class="layui-card top-panel" id="item-{$item.id}">
            <!--<div class="layui-card-header">要展示的指标名称</div>-->
            <div class="layui-card-body">
                <div class="check-btn">
                    <input
                            type="checkbox"
                            class="id"
                            lay-filter="id"
                            value="{$item.id}"
                            lay-skin="primary"
                            data-title="{$item.title}"
                            data-url="{$item.url}"
                    />
                </div>
                <video controls>
                    <source src="{$item.url}"  type="video/mp4">
                    <source src="{$item.url}"  type="video/ogg">
                    您的浏览器不支持 HTML5 video 标签。
                </video>
                <div class="picture-title">{$item.title}</div>
                <div class="delete-btn" onclick="clickDelOne('{$item.id}')"><i class="fa fa-trash"></i></div>
            </div>
        </div>
    </div>
    {/volist}
</div>
<div id="page">
    {$pager|raw}
</div>
<script>
    layui.use(['jquery', 'layer'],function(){
        var layer = layui.layer,
        $ = layui.jquery;

        $(function () {
            $("#picker-add").on('click', function () {
                layer.open({
                    title: "新增视频",
                    type: 2,
                    shift: 2,
                    resize: false,
                    area: ['90%', '90%'],
                    shadeClose: false,
                    content: "{:url('mediavideo/add')}"
                });
            });
        });

        //点击确认
        clickSure = function () {
            var list = [];
            $('.id:checked').each(function (i, item) {
                list.push({id: $(item).val(), url: $(item).data('url')});
            });
            if(list.length < 1){
                layer.alert("请选择视频");
                return;
            }

            parent.setVideoValue(list, "{$field}");
            parent.layer.close(parent_index);
        };
    });
</script>

<style>
    .layui-card{
        margin: 10px auto 0;
        height: 160px;
        width: 220px;
    }
    .layui-card-body {
        padding: 0;
        height: 100%;
        width: 100%;
    }
    .layui-card-body video{margin: auto 5px;width: 220px;height: 160px;}
    .layui-card-body:hover{
        border: 1px solid #FF5722;
    }
    /*.layui-form-checkbox[lay-skin=primary]{padding-left: 0;}*/
    .check-btn,.picture-title,.delete-btn{
        position: absolute;bottom: 0;
        line-height: 30px;
        text-align: center;
        color: #fff;
    }
    .check-btn{
        width: 19px;height: 19px;left: 0;
        z-index: 6;
        top: 0;
    }
    .picture-title{
        width: 100%;
        left: 0;background-color: rgba(0,0,0,.5);
        font-size: 12px;
        overflow: hidden;
        white-space: nowrap;
    }
    .delete-btn{
        right: 0;
        width: 34px;
        background-color: #FF5722;
        cursor: pointer;
        z-index: 6;
        display: none;
    }
    .layui-card-body:hover .delete-btn,.layui-card-body:hover .check-btn{display: block;}
    .layui-form-checkbox[lay-skin=primary]{height: 19px !important;margin-top: -12px;margin-left: -1px;}
</style>
